<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <el-button @click="show()" class="marginLeft10" type="primary"
          >新增</el-button
        >
      </div>

      <div class="main_table" style="min-height: 590px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
        >
          <el-table-column type="selection" />

          <el-table-column label="ID" prop="id" :show-overflow-tooltip="true" />

          <el-table-column
            label="客户类型"
            prop="company_type"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div class="dis" v-for="item in scope.row.labels" :key="item">
                {{ labels[item] }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="产品名称"
            prop="name"
            :show-overflow-tooltip="true"
          ></el-table-column>

          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <div>
                <el-link @click="show(scope.row)" type="primary">编辑</el-link>
                <el-link @click="toMenu(scope.row.id)" type="warning"
                  >维护菜单</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_page boxdq">
        <div></div>
        <!-- 分页 -->
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog
      :title="dialog.isadd ? '新增产品' : '编辑产品'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
      :visible.sync="dialog.show"
      class="main_dialog dialog450"
    >
      <el-form
        :inline="false"
        :model="form"
        class="demo-form-inline"
        ref="userListFrom"
        label-width="90px"
      >
        <el-form-item label="客户类型：" prop="company_type">
          <el-select
            multiple
            collapse-tags
            v-model="form.company_type"
            placeholder="请选择客户类型"
          >
            <el-option
              v-for="(item, index) in labels"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品名称：" prop="name">
          <el-input
            v-model.trim="form.name"
            placeholder="类型名称"
            clearable
            class="wid300"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="addOrEdit()" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  productList,
  productAdd,
  productEdit
} from "@/api/product/productList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  data() {
    return {
      // 分页
      current: {
        page: 1,
        per_page: 20
      },
      limit: 20,
      totalCount: 1,
      // 列表数据
      list: [],
      listLoading: false,
      // 全选
      selectArr: [],
      // 更多
      moredata: false,
      //   userType: [], //客户类型列表
      labels: [], //多选表格展示
      dialog: {
        show: false,
        isadd: true
      },
      form: {
        company_type: [],
        name: ""
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取列表
    getData() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.current)) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        this.current
      );
      productList(data).then(res => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.list = res.data.list.data;
          this.labels = res.data.company_type_list;
          res.data.list.data.map(e => {
            e.labels = [];
            if (e && e.company_type) {
              e.labels = e.company_type.split(",");
            }
            // 筛选--开始
            let arr2 = [];
            let labels_ids = [];
            if (this.labels) {
              labels_ids = Object.keys(this.labels);
            }
            labels_ids.filter(item => {
              e.labels.includes(item) && arr2.push(item);
            });
            e.labels = arr2;
          });
          this.totalCount = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    //弹窗
    show(data) {
      this.dialog.show = true;
      if (data) {
        this.form = {
          id: data.id,
          name: data.name,
          company_type: data.labels
        };
        this.dialog.isadd = false;
      }
    },
    close() {
      this.dialog.show = false;
      this.dialog.isadd = true;
      this.form = {
        name: "",
        company_type: null
      };
    },
    addOrEdit() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.company_type = form.company_type.join(",");
      if (form.name == "") {
        this.$message.error("请填入客户类型名称");
      } else {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
            )
          },
          apiUrl().name,
          form
        );

        if (form.id) {
          productEdit(data).then(res => {
            if (res.errcode == 0) {
              this.$message.success("保存成功");
              this.close();
              this.getData();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        } else {
          productAdd(data).then(res => {
            if (res.errcode == 0) {
              this.$message.success("保存成功");
              this.close();
              this.getData();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      }
    },
    //维护菜单
    toMenu(id) {
      this.$router.push(`/product/maintenanceMenu/${id}`);
    },
    // 导出
    exportb() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.list_form())) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        this.list_form()
      );
      user_dispatchUserIndexw(data).then(res => {
        if (res.errcode == 0) {
          this.$message({
            message: "导出成功",
            type: "success"
          });
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map(item => {
        this.selectArr.push({ id: item.id });
      });
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.getData();
    },
    changePage(page) {
      this.current.page = page;
      this.getData();
    },
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.getData();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.maincl {
  //   .el-select {
  // 	 width: 114px;
  //   }
  .more {
    margin-left: 50px;
  }
  .handle_btn {
    padding: 0;
    border: 0;
  }
  .edit_dialog {
    .address {
      max-width: 350px;
    }
  }
  .mainor_form {
    text-align: right;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }
  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }
      &.hover-row > td {
        background: none !important;
      }
      .current-row > td {
        background: none !important;
      }
    }
  }
  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }
  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }
  /deep/.el-table tr.expanded + tr {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr > td {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .mainex_ta {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .mainex_ta th,
  /deep/.el-table tr.expanded + tr .mainex_ta tr {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr:hover {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr:hover > td {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .el-table tr:hover {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
    background: #fafafa !important;
  }
  /deep/.main_table .el-table--small td .cell {
    display: flex !important;
  }
}
.dis {
  margin-right: 5px;
}
</style>
